<template>
  <a-modal title="专家信息录入" :visible="editVisible" @ok="handleSave" @cancel="handleClose">
    <!-- <a-alert class="card" message="“是否硕导”和“是否博导”只能选择一项填写" type="info" /> -->
    <a-form :form="form">
      <a-row :gutter="48">
        <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="录入院系">
            <a-select v-decorator="[
                'ssyxm',
                {
                  rules: [{ required: true, message: '请选择录入院系' }]
                }
              ]" allowClear showSearch :filterOption="filterOption" optionFilterProp="children">
              <a-select-option v-for="i in yxList" :key="i.id" :value="i.dwh">{{ i.dwh }} {{ i.dwmc }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="姓名">
            <a-input v-decorator="[
                'xm',
                {
                  rules: [{ required: true, message: '请输入姓名！' }]
                }
              ]" placeholder="请输入..." />
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="职称">
            <a-select v-decorator="[
                'zcm',
                {
                  rules: [{ required: true, message: '请选择职称' }]
                }
              ]" allowClear showSearch optionFilterProp="children">
              <a-select-option v-for="i in TYPE0342" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="是否校外专家">
            <a-select v-decorator="[
                'sfxwry',
                {
                  rules: [{ required: true, message: '请选择是否校外专家' }]
                }
              ]" allowClear showSearch optionFilterProp="children">
              <a-select-option v-for="i in TYPE0065" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="工作单位">
            <a-input v-decorator="[
                'gzdw',
                {
                  rules: [{ required: true, message: '请输入工作单位！' }]
                }
              ]" placeholder="请输入..." />
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="专业特长">
            <a-input v-decorator="[
                'zytc',
                {
                  rules: [{ required: true, message: '请输入专业特长！' }]
                }
              ]" placeholder="请输入..." />
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="是否博导">
            <a-select v-decorator="[
                'sfbd',
                {
                  rules: [{ required: true, message: '请选择是否博导' }],
                  validateTrigger: 'onSubmit'
                }
              ]" allowClear @change="e => sdOrBd = e === undefined ? '' : 'bd'" showSearch optionFilterProp="children">
              <a-select-option v-for="i in TYPE0065" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="是否硕导">
            <a-select v-decorator="[
                'sfsd',
                {
                  rules: [{ required: true, message: '请选择是否硕导' }],
                  validateTrigger: 'onSubmit'
                }
              ]" allowClear @change="e => sdOrBd = e === undefined ? '' : 'sd'" showSearch optionFilterProp="children">
              <a-select-option v-for="i in TYPE0065" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <!-- <a-col :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="成员类型">
            <a-select v-decorator="[
                'cylxm',
                {
                  rules: [{ required: true, message: '请选择成员类型' }]
                }
              ]" @change="cylxChange" showSearch optionFilterProp="children">
              <a-select-option v-for="i in TYPE0372" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col v-if="cylxm === '02'" :sm="{span:12}" :lg="{span:12}" :xl="{span:12}">
          <a-form-item label="排序">
            <a-input-number :min="1" :max="99" v-decorator="[
                'sort'
              ]" style="width: 100%" />
          </a-form-item>
        </a-col> -->
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
import { mapState } from 'vuex'
const selectArr = ['TYPE0126', 'TYPE0075','TYPE0372','TYPE0065','TYPE0342']

export default {
  props: {
    editVisible: {
      default: false
    },
    data: {
      default: function() {
        return {
          xm: '',
          zcm: '',
          sfxwry: '',
          gzdw: '',
          sfbd: '',
          cylxm: '',
          sort:''
        }
      }
    },
    yxList: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data() {
    return {
      form: this.$form.createForm(this),
      cylxm: '',
      sdOrBd: '' //选择是否硕导还是选择是否博导
    }
  },
  created () {
    selectArr.forEach(v => {
      this.$store.dispatch('app/setDictionary', v)
    })
  },
  watch: {
    data: {
      handler: function(val) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            xm: val.xm || '',
            zcm: val.zcm || '',
            sfxwry: val.sfxwry || '',
            gzdw: val.gzdw || '',
            sfbd: val.sfbd || '',
            sfsd: val.sfsd || '',
            cylxm: val.cylxm || '',
            sort:val.sort || '',
            ssyxm: val.ssyxm || ''
          })
          this.cylxm = val.cylxm
          if (val.sfbd) {
            this.sdOrBd = 'bd'
          } else if (val.sfsd) {
            this.sdOrBd = 'sd'
          } else {
            this.sdOrBd = ''
          }
        })
      },
      immediate: true
    },
  },
  computed: {
    ...mapState({
      TYPE0372: state => state.app['TYPE0372'], // 成员类型
      TYPE0065: state => state.app['TYPE0065'], // 是否校外人员  是否博导
      TYPE0342: state => state.app['TYPE0342'] // 职称
    })
  },
  methods: {
    cylxChange(code) {
      this.cylxm = code
    },
    filterOption (value, op) {
      return op.componentOptions.children[0].text.indexOf(value) !== -1
    },
    handleSave() {
      this.form.validateFields(
        (err, values) => {
          if (!err) {
            values.sort = values.cylxm === '01' ? 1 : (values.cylxm === '03' ? 100 : values.sort)
            let params = Object.assign({}, this.data, values)
            this.$DateToString(params)
            params.sfbdmc = this.sdOrBd === 'bd' ? this.TYPE0065.find(e=>e.code==values.sfbd).name : ''
            params.sfsdmc = this.sdOrBd === 'sd' ? this.TYPE0065.find(e=>e.code==values.sfsd).name : ''
            params.sfxwrymc = this.TYPE0065.find(e=>e.code==values.sfxwry).name
            params.zcmmc = this.TYPE0342.find(e=>e.code==values.zcm).name
            // params.cylxmc = this.TYPE0372.find(e=>e.code==values.cylxm).name
            params.ssyxmc = this.yxList.find(e=>e.dwh==values.ssyxm).dwmc
            this.$emit('success', params)

            // const api = params.id ? 'pleaWyUpdate' :'pleaWyAdd'
            // this.$api.degree[api](params).then(res => {
            //   this.$message.success(res.msg);
            // }).catch(err => {
            //   this.$message.error(res.msg);
            // })
            // this.$emit('success', params)
          }
        },
      );
    },
    handleClose() {
      this.$emit('close')
    }
  }
}

</script>
